<template>
  <div>
    <CloudRow>
      <CloudCol :span="2">基本用法：</CloudCol>
      <CloudCol>
        <CloudTreeSelect
          v-model="value"
          style="width: 300px"
          :treeData="treeData"
          :defaultExpandAll="true"
          allow-clear
        >
        </CloudTreeSelect>
      </CloudCol>
    </CloudRow>
    <CloudRow style="margin-top: 10px">
      <CloudCol :span="2"> 带搜索：</CloudCol>
      <CloudCol>
        <CloudTreeSelect
          v-model="value1"
          show-search
          style="width: 300px"
          :treeData="treeData"
          :defaultExpandAll="true"
          allow-clear
        >
        </CloudTreeSelect>
      </CloudCol>
    </CloudRow>
  </div>
</template>

<script>
  export default {
    title: '1.基础用法',
    subTitle: '最简单的用法',
    data () {
      return {
        treeExpandedKeys: [],
        value: undefined,
        value1: undefined,
        treeData: [{
          title: 123,
          key: 123,
          isParent: true,
          children: [{
            title: 456,
            key: 456
          }, {
            title: 789,
            key: 789
          }, {
            title: 111,
            key: 111
          }, {
            title: 222,
            key: 222
          }, {
            title: 333,
            key: 333
          }]
        }],
      }
    },
    methods: {

    }
  }
</script>

<style lang="scss">
</style>